<div class="element-property">
    <div class="element-property-title">
        {{'table.property-title' | translate}}
    </div>
    <div class="table-selection">
        <div class="element-property-header">
            <span>{{'table.property-data' | translate}}</span>
        </div>
        <div class="_section-newline">
            <div class="my-form-field" style="width: 140px">
                <span>{{'table.property-type' | translate}}</span>
                <mat-select [formControl]="tableTypeCtrl" (selectionChange)="onTableChanged()">
                    <mat-option [value]="tableType.data">{{'table.property-type-data' | translate}}</mat-option>
                    <mat-option [value]="tableType.history">{{'table.property-type-history' | translate}}</mat-option>
                </mat-select>
            </div>
            <div class="section-inline-margin2"></div>
            <div *ngIf="tableTypeCtrl.value === tableType.history" class="my-form-field" style="display: inline-block; width: 140px">
                <span>{{'table.property-date-last-range' | translate}}</span>
                <mat-select [(value)]="options.lastRange" (selectionChange)="onTableChanged()">
                    <mat-option *ngFor="let ev of lastRangeType | enumToArray" [value]="ev.key">
                        {{ ev.value }}
                    </mat-option>
                </mat-select>
            </div>            
        </div>
        <div class="element-property-header">
            <span>{{'table.property-header' | translate}}</span>
        </div>
        <div class="_section-newline">
            <div class="my-form-field section-inline-number">
                <span>{{'table.property-header-height' | translate}}</span>
                <input numberOnly [(ngModel)]="options.header.height" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="number" min="0" max="100">
            </div>
            <div class="section-inline-margin"></div>
            <div class="my-form-field section-inline-number">
                <span>{{'table.property-header-fontSize' | translate}}</span>
                <input numberOnly [(ngModel)]="options.header.fontSize" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="number" min="8" max="30">
            </div>
            <div class="section-inline-margin2"></div>
            <div class="my-form-field section-inline-color color-field">
                <span>{{'table.property-header-background' | translate}}</span>
                <input [(colorPicker)]="options.header.background" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.header.background"
                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                    [cpPosition]="'auto'" (colorPickerChange)="onTableChanged()" /> 
            </div>
            <div class="section-inline-margin2"></div>
            <div class="my-form-field section-inline-color color-field">
                <span>{{'table.property-header-color' | translate}}</span>
                <input [(colorPicker)]="options.header.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.header.color"
                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                    [cpPosition]="'auto'" (colorPickerChange)="onTableChanged()"/>
            </div>
        </div>
        <div class="element-property-header">
            <span>{{'table.property-row' | translate}}</span>
        </div>
        <div class="_section-newline">
            <div class="my-form-field section-inline-number">
                <span>{{'table.property-row-height' | translate}}</span>
                <input numberOnly [(ngModel)]="options.row.height" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="number" min="0" max="100">
            </div>
            <div class="section-inline-margin"></div>
            <div class="my-form-field section-inline-number">
                <span>{{'table.property-row-fontSize' | translate}}</span>
                <input numberOnly [(ngModel)]="options.row.fontSize" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="number" min="8" max="30">
            </div>
            <div class="section-inline-margin2"></div>
            <div class="my-form-field section-inline-color color-field">
                <span>{{'table.property-row-background' | translate}}</span>
                <input [(colorPicker)]="options.row.background" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.row.background"
                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                    [cpPosition]="'auto'" (colorPickerChange)="onTableChanged()" /> 
            </div>
            <div class="section-inline-margin2"></div>
            <div class="my-form-field section-inline-color color-field">
                <span>{{'table.property-row-color' | translate}}</span>
                <input [(colorPicker)]="options.row.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.row.color"
                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                    [cpPosition]="'auto'" (colorPickerChange)="onTableChanged()"/>
            </div>
            <div class="section-inline-margin2"></div>
            <div class="my-form-field section-inline-color color-field">
                <span>{{'table.property-grid-color' | translate}}</span>
                <input [(colorPicker)]="options.gridColor" [cpAlphaChannel]="'always'" class="input-color" [style.background]="options.gridColor"
                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="width: 88px"
                    [cpPosition]="'auto'" (colorPickerChange)="onTableChanged()"/>
            </div>
        </div>
        <div class="element-property-header">
            <span>{{'table.property-layout' | translate}}</span>
        </div>
        <div class="_section-newline">
            <!-- <div class="my-form-field section-inline-number">
                <span>{{'graph.property-border' | translate}}</span>
                <input numberOnly [(ngModel)]="options.paginator.show" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="number" min="0">
            </div> -->
            <div class="section-inline-margin"></div>
            <div class="my-form-field section-inline-toggle slider-field">
                <span>{{'table.property-header' | translate}}</span>
                <mat-slide-toggle color="primary" [(ngModel)]="options.header.show" (change)="onTableChanged()"></mat-slide-toggle>
            </div>
            <div *ngIf="tableTypeCtrl.value === tableType.history" style="display: inline-block;">
                <div class="section-inline-margin2"></div>
                <div class="my-form-field section-inline-toggle slider-field">
                    <span>{{'table.property-filter' | translate}}</span>
                    <mat-slide-toggle color="primary" [(ngModel)]="options.filter.show" (change)="onTableChanged()"></mat-slide-toggle>
                </div>
                <div class="section-inline-margin2"></div>
                <div class="my-form-field section-inline-toggle slider-field">
                    <span>{{'table.property-paginator' | translate}}</span>
                    <mat-slide-toggle color="primary" [(ngModel)]="options.paginator.show" (change)="onTableChanged()"></mat-slide-toggle>
                </div>
                <div class="section-inline-margin2"></div>
                <div class="my-form-field section-inline-toggle slider-field">
                    <span>{{'table.property-daterange' | translate}}</span>
                    <mat-slide-toggle color="primary" [(ngModel)]="options.daterange.show" (change)="onTableChanged()"></mat-slide-toggle>
                </div>
            </div>
        </div>
        <div class="section-newline">&nbsp;</div>
        <div style="position: relative">
            <mat-tab-group style="width: 100%;" #grptabs>
                <mat-tab label="{{'table.property-cols' | translate}}">
                    <div class="section-newline">&nbsp;</div>
                    <div *ngFor="let column of options.columns; index as x" class="cell-item column-item">
                        <div class="my-form-field section-inline">
                            <span>{{'table.property-column-name' | translate}}</span>
                            <input [(ngModel)]="column.label" type="text" [disabled]="true">
                        </div>
                        <div class="my-form-field section-inline-number">
                            <span>{{'table.property-column-type' | translate}}</span>
                            <input [(ngModel)]="column.type" type="text" [disabled]="true">
                        </div>                        
                        <div class="section-item-newline">
                            <div class="my-form-field section-inline-type">                            
                                <span>{{'table.property-column-align' | translate}}</span>
                                <mat-select [(value)]="column.align" (selectionChange)="onTableChanged()">
                                    <mat-option [value]="alignType.left">{{'table.cell-align-left' | translate}}</mat-option>
                                    <mat-option [value]="alignType.center">{{'table.cell-align-center' | translate}}</mat-option>
                                    <mat-option [value]="alignType.right">{{'table.cell-align-right' | translate}}</mat-option>
                                </mat-select>
                            </div>
                            <div class="section-inline-margin" style="margin-right: 3px;"></div>
                            <div class="my-form-field section-inline-number">
                                <span>{{'table.property-column-width' | translate}}</span>
                                <input numberOnly [(ngModel)]="column.width" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="number" min="40" >
                            </div>
                        </div>
                    </div>
                </mat-tab>
                <!-- <mat-tab *ngIf="tableTypeCtrl.value === tableType.data" label="{{'table.property-rows' | translate}}">
                    <div class="section-newline">&nbsp;</div>
                    <div *ngFor="let row of options.rows; index as y" class="cell-item">
                        <div class="my-form-field section-inline-name">
                            <span>{{'table.property-row-name' | translate}}</span>
                            <input [(ngModel)]="row.name" (change)="onTableChanged()" (keyup.enter)="onTableChanged()" type="text" >
                        </div>    
                        <div class="section-inline-margin"></div>
                        <div class="my-form-field section-inline-type">                            
                            <span>{{'table.property-row-type' | translate}}</span>
                            <mat-select [(value)]="column.type" (selectionChange)="onTableChanged()">
                                <mat-option [value]="columnType.label">{{'table.property-column-label' | translate}}</mat-option>
                                <mat-option [value]="columnType.variable">{{'table.property-column-variable' | translate}}</mat-option>
                                <mat-option [value]="columnType.timestamp">{{'table.property-column-timestamp' | translate}}</mat-option>
                            </mat-select>
                        </div>
                    </div>
                </mat-tab>                 -->
            </mat-tab-group>
            <div class="toolbox">
                <button mat-icon-button (click)="onAdd()" matTooltip="{{'table.property-customize-tooltip' | translate}}">
                    <mat-icon>edit</mat-icon>
                </button>
            </div>
        </div>
    </div>
</div>
